<template>
	<view class="my_kefang">
		<view class="fuwu_top" style="width: 200rpx;margin: 20rpx;"><u-button @click="open()" text="呼叫客房服务"></u-button></view>

		<view class="myRoom_card">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="room_num" style="font-size: 36rpx;font-weight: 550;padding: 10rpx 0;">服务项目:{{ item.type_name }}</view>
				<u-line color="#2979ff"></u-line>

				<u-line color="#2979ff"></u-line>
				<view class="room_type">
					状态:
					<u-tag
						v-if="item.states == 0 ? true : false"
						style="margin-left: 10rpx; display: inline-block; width: 120rpx;text-align: center;"
						type="warning"
						text="待服务"
					></u-tag>
<u-tag
						v-if="item.states == 2 ? true : false"
						style="margin-left: 10rpx; display: inline-block; width: 140rpx;text-align: center;"
						type="error"
						text="拒绝服务"
					></u-tag>
					<u-tag
						v-if="item.states == 1 ? true : false"
						style="margin-left: 10rpx; display: inline-block; width:140rpx;text-align: center;"
						type="success"
						text="完成服务"
					></u-tag>
				</view>
				<u-line color="#2979ff"></u-line>
				<view class="process" style="margin: 20rpx 0 0 0;">
					<u-button
						@click="show_process(item)"
						style="margin-left: 10rpx; display: inline-block; width: 220rpx;text-align: center;"
						size="mini"
						type="primary"
						text="查看服务流程"
					></u-button>
				</view>
			</view>
		</view>

		<!-- 添加框 -->
		<u-popup round="10" closeable mode="center" :show="poup_show" @close="close" @open="open">
			<view class="popup_box">
				<view class="tit">客服服务申请</view>
				<view class="contnet_box">
					<u-form>
						<view class="item_input">
							<u-form-item labelWidth="100" label="服务类型" borderBottom @click="showsbuject = true" ref="item1">
								<u--input v-model="addForm.type_name" disabled disabledColor="#ffffff" placeholder="请选择服务类目" border="none"></u--input>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</u-form-item>
						</view>

						<view class="add_btn" style="margin:40upx"><u-button type="success" style="width: 320upx;height: 70upx;" text="确定" @click="add"></u-button></view>
					</u-form>
				</view>
			</view>
		</u-popup>

		<u-action-sheet :show="showsbuject" :actions="actions" title="请选择服务类目" @close="showsbuject = false" @select="Select"></u-action-sheet>

		<u-popup round="10" closeable mode="center" :show="liucheng_poup_show" @close="liucheng_poup_show = false">
			<view class="popup_box">
				<view class="tit">流程</view>

				<view class="contnet_box">
					<!-- activeIcon="checkmark" inactiveIcon="arrow-right" -->
					<u-steps direction="column">
						<u-steps-item  :desc="liucheng_list.dates_" :title="'申请'+liucheng_list.type_name+'服务'"></u-steps-item>
						<!-- 成功 -->
						<u-steps-item v-if="liucheng_list.states==1?true:false"  :desc="liucheng_list.fuuw_times" 
						:title="liucheng_list.fuwu_user_name+'完成服务' "></u-steps-item>
						<!-- 失败 -->
						<u-steps-item v-if="liucheng_list.states==2?true:false"  :desc="liucheng_list.fuuw_times" error 
						
						:title="liucheng_list.fuwu_user_name+'拒绝服务'+' 拒绝理由:'+ liucheng_list.jujue_liyou"
						></u-steps-item>
						
						
						<!-- <view class="liyoou_txt"  v-if="liucheng_list.states==2?true:false">
							拒绝理由:{{liucheng_list.jujue_liyou}}
						</view> -->
					</u-steps>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { Request2 } from '@/until/api.js';
export default {
	data() {
		return {
			liucheng_poup_show: false,
			liucheng_list: '',
			list: [],
			addForm: {
				roomnum: '',
				room_price: ''
			},
			poup_show: false,
			showsbuject: false,
			actions: [],
			addForm: {
				type_name: ''
			}
		};
	},
	onShow() {
		this.getlist();
		this.getlist_fuwu();
	},
	methods: {
		// 展示流程
		show_process(item) {
			this.liucheng_list = item;
			this.liucheng_poup_show = true;
		},
		async add() {
			if (this.addForm.type_name == '') {
				this.$u.toast('请选择服务类目!');
				return false;
			}

			var user_accout = uni.getStorageSync('account');
			var user_name = uni.getStorageSync('supername');
			var requsetdata = {
				...this.addForm,
				user_accout: user_accout,
				user_name: user_name
			};
			var res = await Request2('/kefangfuwu/add', 'post', requsetdata);
			if (res.data.code == '200') {
				this.$u.toast('申请客房服务成功!');
				this.poup_show = false;
				this.showsbuject = false;
				this.addForm = {
					type_name: ''
				};
				this.getlist();
			} else {
				this.$u.toast(res.data.msg);
			}
		},
		Select(e) {
			this.addForm.type_name = e.name;
		},
		open() {
			this.poup_show = true;
		},
		close() {
			this.poup_show = false;
		},

		//获取服务类目列表
		async getlist_fuwu() {
			var requsetdata = {};
			var res = await Request2('/kefangfuwu/kefangfuwutoos', 'post', requsetdata);
			this.actions = res.data.data;
			console.log(this.list, 'this.list');
		},
		//获取列表
		async getlist() {
			var requsetdata = {
				user_type: uni.getStorageSync('user_type'),
				user_accout: uni.getStorageSync('account')
			};
			var res = await Request2('/kefangfuwu/kefangfuwu', 'post', requsetdata);
			this.list = res.data.data;
			console.log(this.list, 'this.list');
		}
	}
};
</script>

<style lang="scss" scoped>
.my_kefang {
	background: #f1f1f1;
	min-height: 100vh;
	overflow: hidden;
	.myRoom_card {
		padding: 20rpx;
		.item {
			padding: 20rpx;
			margin: 20rpx 0;
			background: #fff;
			border-radius: 20rpx;
			view {
				margin: 10rpx 0;
			}
		}
	}
}

.top_box {
	margin: 20rpx;
	.addbtn {
		width: 150rpx;
		height: 80rpx;
	}
}
.popup_box {
	// background-color: #fff;
	width: 600upx;
	height: 400upx;

	overflow: hidden;

	box-sizing: border-box;
	// padding: 0 0upx;
	.contnet_box {
		padding: 20upx 20upx;
		.item_input {
			display: flex;
			width: 100%;
			// text-align: center;

			margin: 15upx 0;
			.label {
				line-height: 60upx;
			}
		}
	}

	.tit {
		text-align: center;
		margin-top: 40upx;
		font-size: 38upx;
		font-weight: 500;
	}
	.tips {
		margin: 60upx 0;
		color: #c2c2c2;
		font-size: 34upx;
		letter-spacing: 2upx;
	}
	.code {
		padding: 0;
		padding-left: 15upx;
	}
}
</style>
